<template>
  <div class="myCollBox">
    <div class="tabsBox">
      <span class="selTabs">37个问答</span>
    </div>
    <div class="questionAnswerMain">
      <div class="questionAnswerMainLeft">
        <div class="questionAnswerContent">
          <div class="questionAnswerList" v-for="(item,index) in questionAnswerList" :key="index">
            <div class="questionAnswerTitle">
              <i class="el-icon-question" style="color:#26b000;font-size:20px"></i>
              <span>{{item.qtitle}}</span>
            </div>
            <div class="titleInformation">
              <div class="titleInformationTitle">
                <span v-for="(aitem,aindex) in item.labelList" :key="aindex">{{aitem.labelName}}</span>
              </div>
              <div class="statistics">
                <span>{{item.createDate}}</span>
                <span>{{item.readNum===null?0:item.readNum}}人阅读</span>
                <span>{{item.interestNum===null?0:item.interestNum}}人关注</span>
              </div>
            </div>
            <div class="favoriteLikes">
              <div> </div>
              <div class="more">
                <el-button type="text" @click="interestQuestion(item.id)">取消关注</el-button>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
          <div class="pagination">
            <el-pagination
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="questionAnswerMainRight" @click="consultImmediately">
        <div class="questionAnswerMainRightContent">
          <div class="consultImmediatelyButton">
          </div>
          <img src="../../assets/img/consultImmediately.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      questionAnswerList: [],
      loading: false
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getHdList()
    },
    // 获取回答列表
    getHdList () {
      this.loading = true
      let params = {
        page: this.page,
        limit: this.limit,
        selectType: 1
      }
      this.$http.get(`/xnkt/tbquestionkt/myQuestionPage`, { params }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.questionAnswerList = res.data.list
        this.total = res.data.total
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 点击关注
    interestQuestion (id) {
      let optType = 0
      this.loading = true
      this.$http.get(`/xnkt/tbquestionkt/interestQuestion/${id}/${optType}`).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        this.getHdList()
      }).catch(() => { this.loading = false })
    },
    consultImmediately () {
      this.$router.push({ name: 'consultingService' })
    }
  }
}
</script>
<style lang="scss" src="./index.scss" scoped></style>
